<template>
	
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back"></view>
		<!--顶部导航-->
		<uni-nav-bar :statusBar="true" title="售后申请" backgroundColor="transparent" :border="false"></uni-nav-bar>

		
		<view class="order_head_box">
			<view class="order_number">订单编号：20210715205309</view>
			<view class="line"></view>
			
			<view class="order_goods_info_box">
				<view class="goods_img_box">
					<image class="goods_img" src="../../../static/logo.png"></image>
				</view>
				
				<view class="goods_text_box">
					<view class="goods_name">MAGIC DRAGON魔杰龙轻柔倍适学步裤</view>
					<view class="goods_size_num">
						<view class="goods_size">尺寸：L</view>
						<view class="goods_num">X1</view>
					</view>
				</view>
			</view>
			
			<view class="goods_all_box">
				<view class="all_pay_num">共1件，</view>
				<view class="order_pay_money">合计：￥138.00</view>
			</view>
		</view>
		
		<view class="tuikuang_box">
			<view class="tuikang_text">退款类型</view>
			
			<view class="tuikang_right_box">
				<picker class="picker_text" @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">仅退款/退货退款/换货</view>
					<view class="uni-input" v-if="Y_picker">{{array[index]}}</view>
				</picker>
				
				<view class="right_icon"></view>
			</view>
		</view>
		
		<view class="tuikuang_box">
			<view class="tuikang_text">退款类型</view>
			<view class="tuikang_moeny">￥138.00</view>
		</view>
		<view class="line1"></view>
		
		<view class="tuikuang_box1">
			<view class="tuikang_text">申请理由：</view>
			<view class="text_input_box">
				<textarea placeholder-class="textarea_box" maxlength="50" placeholder="最多不超过50字"></textarea>
			</view>
			
			<view class="uplao_box_text">
				<view class="upload_shouhou">上传凭证</view>
				<view class="upload_max">（最多上传3张）</view>
				<view class="upload_maohao">：</view>
			</view>
			
			<view class="upload_img_box">
				<u-upload
					:fileList="fileList3"
					@afterRead="afterRead"
					@delete="deletePic"
					name="3"
					multiple
					:maxCount="10"
					:previewFullImage="true"
				></u-upload>
			</view>
		</view>
		
		<view style="height: 116upx;"></view>
		
		
		<view class="button_box_tijiao">
			<view class="tijiao_button">提交</view>
		</view>
		
	</view>
</template>

<script>
	export default {
	data() {
		return {
			title: 'picker',
			array: ['仅退款', '换货', '退货换货'],
			index: 0,
			date: '',
			time: '12:01',
			Y_picker: false,	//判断用户是否点击过了退款类型的选择器
			fileList3: [{
				url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
			}],
		}
	    },
	    computed: {
	    },
	    methods: {
	        bindPickerChange: function(e) {
	            console.log('picker发送选择改变，携带值为', e.target.value)
	            this.index = e.target.value;
				this.Y_picker = true;
	        
	        },
			// 以下是文件上传预览
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						},
					});
				})
			},
	    }
	}
</script>

<style>
	page{
		background-color: #F6F8F9;
	}
	.order_head_box{
		/* margin: 0 28upx; */
		margin-top: 20upx;
		margin-left: 28upx;
		margin-right: 28upx;
		background-color: #FFFFFF;
		padding: 24upx 16upx 20upx 24upx;
		border-radius: 8upx;
		box-sizing: border-box;
	}
	.order_number{
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 34upx;
	}
	.line{
		width: 660upx;
		height: 2upx;
		background: #F7F7F7;
		/* background: #007AFF; */
		margin: 0 auto;
		margin-top: 24upx;
		/* position: relative; */
		/* right: 44upx; */
	}
	.line1{
		width: 660upx;
		height: 2upx;
		background: #F7F7F7;
		/* background: #007AFF; */
		/* margin: 0 auto; */
		right: 44upx;
		position: absolute;
	}
	
	.order_goods_info_box{
		display: flex;
		justify-content: space-between;
		margin-top: 24upx;
		box-sizing: border-box;
	}
	.goods_img_box{
		width: 200upx;
		height: 200upx;
	}
	.goods_img{
		width: 200upx;
		height: 200upx;
	}
	.goods_name{
		width: 426upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	.goods_text_box{
		margin-left: 32upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
		box-sizing: border-box;
	}
	.goods_size_num{
		display: flex;
		justify-content: space-between;
		width: 420upx;
		margin-top: 12upx;
	}
	.goods_size{

		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
	}
	.goods_num{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40upx;
	}
	
	.goods_all_box{
		display: flex;
		justify-content: flex-end;
		margin-top: 12upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	.tuikuang_box{
		padding: 36upx 28upx 36upx 24upx;
		margin: 24upx 26upx 0 28upx;
		background-color: #FFFFFF;
		border-radius: 8upx;
		display: flex;
		justify-content: space-between;
	}
	.tuikuang_box1{
		padding: 36upx 28upx 36upx 24upx;
		margin: 0upx 26upx 0 28upx;
		background-color: #FFFFFF;
		
	}
	.tuikang_text{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	.uni-input{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40upx;
	}
	.tuikang_right_box{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.right_icon{
	    width: 16upx;
	    height: 16upx;
	    border-top: 3upx solid #666666;
	    border-right: 3upx solid #666666;
	    transform: rotate(45deg);
		margin-left: 22upx;
	}
	.tuikang_moeny{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	.text_input_box{
		margin-top: 24upx;
		background: #F6F6F6;
		border-radius: 8upx;
		padding: 24upx 20upx;
	}
	.textarea_box{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
	}
	.uplao_box_text{
		margin-top: 24upx;
		display: flex;
		font-family: PingFangSC-Regular, PingFang SC;
		align-items: baseline;
	}
	.upload_shouhou{
		color: #333333;
		font-size: 28upx;
	}
	.upload_max{
		color: #999999;
		font-size: 24upx;
	}
	.upload_maohao{
		color: #333333;
		font-size: 28upx;
	}
	.upload_img_box{
		margin-top: 24upx;
	}
	.button_box_tijiao{
		z-index: 10;
		/* position: fixed; */
		position: relative;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		margin-bottom: 54upx;
	}
	.tijiao_button{
		width: 620upx;
		line-height: 100upx;
		background: #58BCFF;
		border-radius: 52upx;
		text-align: center;
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: ;
	}
</style>
